<template>
	<!-- <custom-tabbar> -->
	<view class="container">
		<status-bar title="单位转换" />
		<view class="select">
			<u--form labelPosition="left" :model="model" ref="uForm" labelWidth='120'>

				<u-form-item label="线缆类型" borderBottom @click="show=true">
					<u--input v-model="cableClass" disabled disabledColor="#ffffff" placeholder="请选择线缆类型"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="规格型号" borderBottom @click="show2=true">
					<u--input v-model="cableModel" disabled disabledColor="#ffffff" placeholder="请选择规格型号"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item :label="title" borderBottom>
					<view class="" style="display: flex;align-items: center;">
						<u-input :placeholder="title" v-model="model.real" @input="inputChange">
							<u-text :text="weightUnit2" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
						</u-input>
						<view class="">
							<u-button text="切换单位" type="success" size="mini" @click="typeFlag=!typeFlag"></u-button>
						</view>
					</view>


				</u-form-item>

				<u-form-item :label="title2" borderBottom>
					<u-input :placeholder="title2" v-model="model.estimatedLength">
						<u-text :text="lengthUnit2" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
					</u-input>
				</u-form-item>
				<u-form-item label="参考范围" borderBottom>
					<u-input placeholder="参考范围" v-model="gaps">
						<u-text :text="lengthUnit2" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
					</u-input>
				</u-form-item>
				<u-form-item label="雨雪天气" borderBottom>
					<u-switch v-model="weatherFlag"  ></u-switch>
				</u-form-item>
			</u--form>
			<!-- <view class="" style="margin-top: 30rpx;">
				<u-button type="success" text="添加到称重记录" icon="plus"></u-button>
			</view> -->
		</view>
		<u-picker :show="show" :columns="data1" @cancel="show=false" close="show=false" @confirm="selectXl"></u-picker>
		<u-picker :show="show2" :columns="data2" @cancel="show2=false" close="show2=false"
			@confirm="selectGg"></u-picker>
	</view>

	<!-- 	</custom-tabbar> -->
</template>

<script>
	import CustomTabbar from "@/components/CustomTabbar.vue";
	import {
		getClassPullDown,
		getModelByclass,
		getSelectInfo,
		getUnitConversion
	} from "../../common/api"
	export default {
		components: {
			CustomTabbar,
		},
		data() {
			return {
				cableClass: "",
				cableModel: "",
				model: {
					real: "",
					estimatedLength: "",
				},
				show: false,
				show2: false,
				data1: [],
				data2: [],
				lengthUnit: "",
				weightUnit: "",
				timer: null,
				gaps: "",
				typeFlag: true,
				weatherFlag: false
			}
		},
		computed: {
			title() {
				return this.typeFlag ? '实际重量' : '实际长度'
			},
			title2() {
				return this.typeFlag ? '估算长度' : '估算重量'
			},
			weightUnit2() {
				return this.typeFlag ? this.weightUnit : this.lengthUnit
			},
			lengthUnit2() {
				return this.typeFlag ? this.lengthUnit : this.weightUnit
			}
		},
		watch: {
			cableClass(newVal) {
				this.cableModel = ""
				if (!newVal) return;
				this.getModelByclass(newVal);
			},
			typeFlag(newV) {
				this.gaps = "";
				this.model = {
					real: "",
					estimatedLength: "",
				};
			},
			 weatherFlag(newV) {
			      this.inputChange();
			    },
		},
		methods: {
			getClassPullDown() {
				getClassPullDown().then((res) => {
					if (res.success) {
						this.data1 = [res.data];
					}
				})
			},
			getModelByclass(newVal) {
				getModelByclass({
					cableClass: newVal
				}).then((res) => {
					if (res.success) {
						this.data2 = [res.data];
						this.cableModel=res.data[0]
						this.estimate()
					}
				});
			},
			selectXl(e) {
				this.cableClass = e.value[0]
				this.show = false
			},
			selectGg(e) {
				this.cableModel = e.value[0]
				this.show2 = false
				let arr = Object.keys(this.model);
				arr.forEach((i) => (this.model[i] = "")); //表单数据置空
				this.estimate()
			},
			estimate() {
				getSelectInfo({
					cableClass: this.cableClass,
					cableModel: this.cableModel
				}).then((res) => {
					if (res.success) {
						this.lengthUnit = res.data.lengthUnit
						this.weightUnit = res.data.weightUnit
					}
				});
			},
			inputChange(e) {
				if (!this.model.real) return
				if (this.timer) {
					clearTimeout(this.timer);
					this.timer = null;
				}
				this.timer = setTimeout(() => {
					let param = {
						cableClass: this.cableClass,
						cableModel: this.cableModel,
						real: this.model.real,
						typeFlag: this.typeFlag ? "weight" : "length",
						weatherFlag: this.weatherFlag,
					};
					getUnitConversion(param).then((res) => {
						if (res.success) {
							this.model.estimatedLength = res.data.estimatedLength;
							this.gaps = `${res.data.minUnit} ~ ${res.data.maxUnit}`;
						} else {
							this.$errorMsg(res.message);
						}
					});
				}, 1000);
			}

		},
		created() {
			this.getClassPullDown()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// height: 100vh;
		display: flex;
		flex-direction: column;

		.select {
			padding: 20rpx 30rpx;
		}
	}
</style>